<template>
  <div class="fax">
    <div class="head">发现</div>
    <div class="bn"><img src="@/assets/elm20.png"></div>
      
    <div>
        <div class="hot">
                <dl class="hotleft">
                    <dd>
                        <h2 class="coo">百元红包</h2>
                        <p>兴业银行联名卡</p>
                    </dd>
                    <dt><img src="@/assets/elm21.png"></dt>
                </dl>
                <dl class="hotright">
                    <dd>
                        <h2 class="coo">超级会员</h2>
                        <p>每月领大额红包</p>
                    </dd>
                    <dt><img src="@/assets/elm23.png"></dt>
                </dl>
        </div>
        <div  class="hot">
                <dl class="hotleft">
                    <dd>
                        <h2 class="coo">金币商城</h2>
                        <p>0元好物在这里</p>
                    </dd>
                    <dt><img src="@/assets/elm22.png"></dt>
                </dl>
                <dl class="hotright">
                    <dd>
                        <h2 class="cor">推荐有奖</h2>
                        <p>5元现金拿不停</p>
                    </dd>
                    <dt><img src="@/assets/elm24.png"></dt>
                </dl>
        </div>
        <div  class="hot">
                <dl class="hotleft">
                    <dd>
                        <h2 class="col">周边优惠</h2>
                        <p>领取口碑好卷</p>
                    </dd>
                    <dt><img src="@/assets/elm25.png"></dt>
                </dl>
                <dl class="hotright">
                    <dd>
                        <h2 class="col">免费流量</h2>
                        <p>每月最高500M</p>
                    </dd>
                    <dt><img src="@/assets/elm26.png"></dt>
                </dl>
        </div>
    </div>

    <div class="swiper-container hongb">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="@/assets/elm27.png"></div>
            <div class="swiper-slide"><img src="@/assets/elm27.png"></div>
            <div class="swiper-slide"><img src="@/assets/elm27.png"></div>
            <div class="swiper-slide"><img src="@/assets/elm27.png"></div>
        </div>
        <div class="swiper-pagination" slot="pagination"></div>
    </div> 
    <ul class="oaa">
        <li><img src="@/assets/elm29.png" class="imgr"><img src="@/assets/elm31.png" class="imgl"><b class="imgb">为你推荐</b>
            <img src="@/assets/elm30.png" class="imgr"></li>
        <li class="lil"> 你的口味，我都懂得</li>
    </ul>
  </div>
</template>

<script>
export default {
    name:"fax",
     mounted(){
        var mySwiper = new Swiper('.swiper-container', {
          autoplay:2000,
          loop:true,
         pagination: {
                    el: '.swiper-pagination',
                },
        })
      },
}
</script>

<style lang="less">
.px2rem(@name, @px){
    @{name}:  @px / 75 * 1rem;
}
.head{
  background:#00a2ff;
  .px2rem(font-size,32);
  text-align:center;
  .px2rem(padding-top,20);
  .px2rem(padding-bottom,20);
  color:#fff;
}
.bn{
    width:100%;
}
.bn img{
    width:100%;
}
.hot{
    display: flex;

    align-items:center;
}
.hotleft{
    border-right:1px solid #ccc;
}
.hotleft,.hotright{
     display:flex;
     align-items:center;
    justify-content:space-around;
    flex:1;
    border-top:1px solid #ccc;
    .px2rem(height,155);
}
.hotleft dd,.hotright dd{
    .px2rem(line-height,53); 
}
.hotleft h2,.hotright h2{
   .px2rem(font-size,35);
   }
.hotleft img,.hotright img{
    .px2rem(height,86);
}
.col{
    color:#ed6660;
}
.cor{
    color:#34b2e4;
}
.coo{
    color:#ff9900;
}
.hongb{
    width:100%;
    border-top:23px solid #ccc;
    border-bottom:23px solid #ccc;
}
.hongb img{
    width:100%;
}
.oaa{
    
    text-align: center;
}
.imgl{
    .px2rem(height,30);
}
.imgr{
    .px2rem(height,12);
}
.imgb{
    .px2rem(font-size,38);
}
.oaa li:nth-child(1){
    .px2rem(padding-top,44);
}
.lil{
    .px2rem(font-size,24);
}
</style>
